<div>
  <center ng-show="!isEndStateReachable()" class="oppia-warning">
    <i class="icon-warning-sign"></i>
    <strong>Warning: </strong>This exploration cannot be completed. The END state is unreachable.
  </center>

  <div class="oppia-graph-viz-container">
    <div state-graph-viz val="graphData" current-state-name="getActiveStateName()" on-click-function="onClickStateInMinimap" on-delete-function="deleteState" on-maximize-function="openStateGraphModal" allow-panning="true" center-at-current-state="true" style="height: 100%;">
    </div>
  </div>

  <div class="oppia-add-state-container">
    <form ng-submit="addState(newStateDesc)">
      <div style="display: table; width: 100%;">
        <div style="display: table-cell; width: 80%;">
          <input type="text" ng-model="newStateDesc" class="oppia-add-state-input" placeholder="New State Name">
        </div>
        <div style="display: table-cell">
          <button type="submit" class="btn oppia-add-state-button" ng-disabled="!isNewStateNameValid(newStateDesc)">
            Create
          </button>
        </div>
      </div>
    </form>
  </div>

  <script type="text/ng-template" id="modals/stateGraph">
    <div class="modal-header">
      <h3>State Graph Visualization</h3>
    </div>

    <div class="modal-body">
      <div state-graph-viz val="graphData" allow-panning="true" current-state-name="currentStateName" on-click-function="selectState" on-delete-function="deleteState" center-at-current-state="true">
      </div>
    </div>

    <div class="modal-footer">
      <button class="btn" ng-click="cancel()">Close</button>
    </div>
  </script>
</div>
